<template>
	<div class="login-container">
		<el-button type="primary" @click="re()" class="re-button" round>返回主页</el-button>
		<div class="login-card">
			<div class="login-header">
				<h2>欢迎登录汉中旅游平台</h2>
				<p>探索两汉三国文化，体验魅力汉中之旅</p>
			</div>
			<el-form :model="form" :rules="loginRules" ref="loginForm" class="login-form">
				<el-form-item prop="username">
					<el-input v-model="form.account" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="form.password" type="password" placeholder="请输入密码"
						prefix-icon="el-icon-lock"></el-input>
				</el-form-item>
				<el-form-item class="remember-me">
					<el-checkbox v-model="rememberMe">记住我</el-checkbox>
					<el-link type="text" class="forgot-password">忘记密码?</el-link>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm()" class="login-button" round>登录</el-button>
				</el-form-item>
				<div class="register-link">
					<span>还没有账号? </span><el-link type="primary" @click="goToRegister">立即注册</el-link>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Login',
		data() {
			return {
				form: {
					account: '',
					password: ''
				},
				rememberMe: false,
				loginRules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 20,
							message: '用户名长度在 3 到 20 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: '密码长度在 6 到 20 个字符',
							trigger: 'blur'
						}
					]
				}
			};
		},
		methods: {
			re(){
				this.$router.push("/");
			},
			submitForm() {
				if (this.form.account.length == 0) {
					this.$message({
						message: '账号不能为空!',
						type: 'warning'
					});
					return;
				}
				if (this.form.password.length == 0) {
					this.$message({
						message: '密码不能为空!',
						type: 'warning'
					});
					return;
				}
				//与后端进行交互
				this.$http.post("userApi/loginCtl/login", this.form).then((resp) => {
					//根据后端响应回来的结果进行处理resp.data(result对象)
					if (resp.data.code == 200) {
						//前端浏览器中存储用户信息
						sessionStorage.setItem("userToken", resp.data.data.userToken);
						sessionStorage.setItem("account", resp.data.data.account);
						sessionStorage.setItem("password", resp.data.data.password);
						sessionStorage.setItem("image", resp.data.data.image);
						sessionStorage.setItem("name", resp.data.data.name);
						this.$router.push("/");
					} else if (resp.data.code == 201) {
						this.$message({
							message: resp.data.desc,
							type: 'warning'
						});
						return;
					} else {
						this.$message({
							message: resp.data.desc,
							type: 'warning'
						});
						return;
					}
				});
			},
			goToRegister() {
				// 注册页面跳转逻辑
				this.$router.push("/register");
			}
		}
	};
</script>

<style scoped>
	.re-button {
	  /* 基础定位属性 */
	  position: absolute;
	  top: 16px;
	  left: 16px;
	  z-index: 100; /* 确保按钮在其他元素上方 */
	  
	  /* 按钮样式 */
	  display: flex;
	  align-items: center;
	  padding: 6px 14px;
	  font-size: 14px;
	  color: #666;
	  background-color: rgba(255, 255, 255, 0.7);
	  border-radius: 20px;
	  border: 1px solid #e0eefc;
	  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1);
	  transition: all 0.3s ease; /* 过渡动画 */
	}
	
	.re-button:hover {
	  color: #3498db;
	  background-color: rgba(52, 152, 219, 0.08);
	  transform: translateY(-2px); /* 悬停上浮效果 */
	  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
	}
	
	.re-button .el-icon {
	  margin-right: 6px;
	  font-size: 16px;
	}
	
	/* 响应式适配 - 小屏幕优化 */
	@media (max-width: 600px) {
	  .re-button {
	    top: 10px;
	    left: 10px;
	    padding: 4px 10px;
	    font-size: 12px;
	  }
	  
	  .re-button .el-icon {
	    font-size: 14px;
	  }
	}
:root {
	--main-color: #3498db;
	--main-radius: 18px;
	--main-shadow: 0 4px 24px rgba(52,152,219,0.10);
	--main-transition: all 0.3s cubic-bezier(.4,0,.2,1);
}
.login-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: linear-gradient(120deg, #e0f2fe 0%, #b3d8f7 40%, #e6f0fa 100%);
	position: relative;
	overflow: hidden;
}
/* 山水意境SVG背景 */
.login-container::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 60vw;
	height: 60vh;
	background: url('https://cdn.jsdelivr.net/gh/ChungZH/static@main/mountain-bg.svg') no-repeat right bottom;
	background-size: contain;
	opacity: 0.18;
	pointer-events: none;
	z-index: 1;
}
.login-card {
	width: 420px;
	background: linear-gradient(120deg, rgba(255,255,255,0.85) 0%, rgba(240,249,255,0.7) 100%);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-radius: var(--main-radius);
	box-shadow: var(--main-shadow);
	padding: 38px 36px 32px 36px;
	margin: 0 16px;
	transition: var(--main-transition);
	border: none;
	border-radius: 15px;
	z-index: 2;
}
.login-card:hover {
	box-shadow: 0 8px 32px rgba(52,152,219,0.18);
}
.login-header {
	text-align: center;
	margin-bottom: 28px;
}
.login-header h2 {
	margin: 0;
	font-size: 2rem;
	color: #2c3e50;
	font-weight: 700;
	letter-spacing: 1px;
}
.login-header p {
	margin: 12px 0 0;
	font-size: 1.08rem;
	color: #666;
	letter-spacing: 0.5px;
}
.login-form {
	margin-top: 24px;
}
.el-input, .el-input__inner {
	border-radius: 12px !important;
	background: #f4faff !important;
	border: 1.5px solid #e0f2fe !important;
	transition: var(--main-transition);
}
.el-input__inner:focus {
	border: 1.5px solid var(--main-color) !important;
	box-shadow: 0 2px 8px rgba(52,152,219,0.10);
}
.remember-me {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0;
}
.forgot-password {
	font-size: 15px;
	color: var(--main-color);
	cursor: pointer;
	transition: color 0.2s;
}
.forgot-password:hover {
	color: #217dbb;
	text-decoration: underline;
}
.login-button {
	width: 100%;
	padding: 14px 0;
	font-size: 1.15rem;
	margin-top: 18px;
	border-radius: 24px;
	background: linear-gradient(90deg, #3498db 0%, #6dd5fa 100%);
	color: #fff;
	font-weight: bold;
	border: none;
	box-shadow: 0 2px 8px rgba(52,152,219,0.12);
	transition: var(--main-transition);
}
.login-button:hover {
	background: linear-gradient(90deg, #6dd5fa 0%, #3498db 100%);
	color: #fff;
	box-shadow: 0 4px 16px rgba(52,152,219,0.18);
	transform: translateY(-2px) scale(1.03);
}
.register-link {
	margin-top: 18px;
	text-align: center;
	font-size: 15px;
}
.register-link span {
	color: #666;
}
.register-link .el-link {
	color: var(--main-color);
	font-weight: 500;
	font-size: 15px;
	margin-left: 2px;
	transition: color 0.2s;
}
.register-link .el-link:hover {
	color: #217dbb;
	text-decoration: underline;
}
@media (max-width: 600px) {
	.login-card {
		width: 100%;
		padding: 18px 4vw 18px 4vw;
	}
	.login-header h2 {
		font-size: 1.2rem;
	}
	.login-header p {
		font-size: 0.95rem;
	}
	.login-button {
		font-size: 1rem;
		padding: 12px 0;
	}
}
</style>